import {
    LockOutlined,
    UserOutlined,
} from '@ant-design/icons';
import {
    LoginForm,
    ProFormText,
} from '@ant-design/pro-components';
import {login} from "@/utils/api/account/login";
import {useState} from 'react';
import {history} from "umi";
import {message} from 'antd';

export default () => {
    const [submit_loading, set_submit_loading] = useState<boolean>(false);
    const [messageApi, contextHolder] = message.useMessage();
    const onFinish = (values: any) => {
        set_submit_loading(true);
        login(values).then(res => {
            localStorage.setItem("auth_token", res.data.token);
            messageApi.open({
                type: 'success',
                content: '登陆成功，正在跳转...',
                duration: 1.5,
            }).then(() => {
                history.push("/");
            });
        }).catch(res => {
        }).finally(() => {
            set_submit_loading(false);
        });
    }
    return (
        <>
            {contextHolder}
            <LoginForm title="河南科技学院" subTitle="小组管理系统 v1.0" onFinish={onFinish} loading={submit_loading}>
                <ProFormText
                    name="username"
                    fieldProps={{
                        size: 'large',
                        prefix: <UserOutlined/>,
                        placeholder: ' 用户名'
                    }}
                    rules={[
                        {
                            required: true,
                            message: '请输入用户名！',
                        },
                    ]}
                />
                <ProFormText.Password
                    name="password"
                    fieldProps={{
                        size: 'large',
                        prefix: <LockOutlined/>,
                        placeholder: ' 密码',
                    }}
                    rules={[
                        {
                            required: true,
                            message: '请输入密码！',
                        },
                    ]}
                />
            </LoginForm>
        </>
    );
};